<%@page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>收银台</title>
		<link rel="stylesheet" href="scripts/miniui/themes/default/miniui.css">
		<link rel="stylesheet" href="layui/css/layui.css" />
		<link rel="stylesheet" href="css/common.css">
	</head>
	<body style="background: #F6F7F9;">
		<div class="main">
			<div class="layui-row">
				<div class="main_left layui-col-xs12 layui-col-md3">
					<div class="layui-row">
						<div class="top">
							<i class="layui-icon layui-icon-app"></i>药品列表
						</div>
						<div class="left_main">
							<input id="key" class="layui-input" placeholder="请输入药品名称" onenter="onKeyEnter" />
							<a class="mini-button" id="searchdrug" onclick="search()">查询</a>
						</div>
					</div>
				</div>
				<div class="main_right layui-col-xs12 layui-col-md9">
					<div class="layui-row">
						<div class="top">
							<label>药品编码：</label>
							<div class="layui-input-inline">
								<input type="text" name="title" required lay-verify="required" placeholder="扫码或手动输入商品编码" autocomplete="off"
								 class="layui-input">
							</div>
							<div class="layui-input-inline">
								<button class="layui-btn layui-btn-primary" style="vertical-align: middle;margin-bottom: 2px;">添加</button>
							</div>
						</div>
						<div class="goods_list">
							<table class="layui-table">
								<thead>
									<tr>
										<th lay-data="{field:'id'}">药品编码</th>
										<th lay-data="{field:'name'}">药品名称</th>
										<th lay-data="{field:'price', edit: 'text'}">零售价（元）</th>
										<th lay-data="{field:'number', edit: 'text'}">数量</th>
										<th lay-data="{field:'remarks', edit: 'text'}">备注</th>
										<th lay-data="{field:'operation'}">操作人</th>
									</tr>
								</thead>
								<tbody id="myTbody">
									<td>1</td>
									<td>1</td>
									<td>1</td>
									　 <td><ul class="btn-numbox">
										<li>
											<ul class="count">
												<li><span id="num-jian" class="num-jian">-</span></li>
												<li><input type="text" class="input-num" id="input-num" value="0" /></li>
												<li><span id="num-jia" class="num-jia">+</span></li>
											</ul>
										</li>
										<li><span class="kucun">（库存:54）</span></li>　
									</ul> </td>
									<td>1</td>
									<td>1</td>
								</tbody>
							</table>
						</div>
						<div class="total ft16">
							合计：【<span> 消费总金额：<i class="totalMoney">0.00</i> </span>】【<span> 消费总数量：<i class="totalQuantity">0</i> </span>】【
							<span> 总积分：<i class="totalIntegral">0</i> </span>】

						</div>

						<table class="reading layui-table" lay-even="">
							<tbody>
								<tr>
									<td>会员查找</td>
									<td colspan="3">
										<div class="layui-input-inline">
											<input type="text" class="layui-input" placeholder="扫描或者手动输入会员卡号" />
										</div>
										<button class="card_reading layui-btn">读卡</button>
										<a href="add_member02.jsp
										" class="registration layui-btn layui-btn-primary">会员登记</a>
										<input type="submit" class="registration layui-btn layui-btn-primary" id="recharge" value="充值">
									</td>
								</tr>
								<tr>
									<td>会员卡号：</td>
									<td></td>
									<td>会员姓名：</td>
									<td></td>
								</tr>
								<tr>
									<td>可用积分：</td>
									<td></td>
									<td>可用储值：</td>
									<td></td>
								</tr>
							</tbody>
						</table>
						<div class="towbtn">
							<input type="submit" id="settlement" value="结算">
							<input type="reset" value="清空" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 以下为充值 -->
		<div class="rmask_box">
			<div class="mask"></div>
			<div class="rbox">
				<div class="box_top">充值</div>
				<div class="box_block box_block3">
					<div class="block_left">充值金额：</div>
					<div class="block_right">
						<input type="text" class="layui-input" />
					</div>
				</div>
				<div class="remark_mess">
					<div class="block_left">
						备注：
					</div>
					<div class="block_right">
						<textarea class="layui-textarea" name="" rows="" cols="" maxlength="200" placeholder="最多输入200字符"></textarea>
					</div>
					<br style="clear: both;">
					<div class="block_left">
						交易时间：
					</div>
					<div class="block_right">
						<input type="text" value="2018-11-23 08:23:43" class="layui-input" readonly style="border: none;" />
					</div>
				</div>
				<div class="rbot">
					<input type="submit" value="提交">
					<input type="text" value="取消">
				</div>
			</div>
		</div>
		<!-- 以下为结算界面 -->
		<div class="mask_box">
			<div class="mask"></div>
			<div class="box">
				<div class="box_top">结算</div>
				<div class="box_block box_block1">
					<div class="block_left"><label for="">应付金额：</label></div>
					<div class="block_right"><input type="text" class="layui-input" value="23131" readonly style="border: none;" /></div>
				</div>
				<div class="box_block box_block2">
					<div class="block_left"><input type="checkbox" name="" />积分：</div>
					<div class="block_right">
						<select class="layui-select" name="" id="">
							<option value="0">请选择</option>
							<option value="1">使用</option>
							<option value="2">不使用</option>
						</select>
					</div>
					<div class="block_left">还需支付：</div>
					<div class="block_right"><input type="text" class="layui-input" value="32432" readonly style="border: none;" /></div>
				</div>
				<div class="box_block box_block3">
					<div class="block_left"><input type="radio" name="payment" /><label for="use_coupon">现金支付：</label></div>
					<div class="block_right">
						<input type="text" class="layui-input" />
					</div>
				</div>
				<div class="remark_mess">
					<div class="block_left">
						备注：
					</div>
					<div class="block_right">
						<textarea class="layui-textarea" name="" rows="" cols="" maxlength="200" placeholder="最多输入200字符"></textarea>
					</div>
					<br style="clear: both;">
					<div class="block_left">
						交易时间：
					</div>
					<div class="block_right">
						<input type="text" value="2018-11-23 08:23:43" class="layui-input" readonly style="border: none;" />
					</div>
				</div>
				<div class="bot">
					<input type="submit" value="提交">
					<input type="text" value="取消">
				</div>
			</div>
		</div>
		<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
		<script src="scripts/miniui/miniui.js"></script>
		<script src="layui/layui.js"></script>
		<script>
			$(function() {
				
				$("#searchdrug").click(function(){					
					//alert("没有此药品！");										
					var drugname=$("#key").val();										
					$.getJSON("DrugServlet",{"drugname":drugname},function(result){										
						if(result==0){										
							alert("没有此药品！");								
						}else{
							alert("仓库有药");
						}
					});
					//alert(drugname);
					});


				
				$("#settlement").click(function() {
					$(".mask_box").show();
				})
				$(".bot input:nth-child(2)").click(function() {
					$(".mask_box").hide();
				})
				$("#recharge").click(function() {
					$(".rmask_box").show();
				})
				$(".rbot input:nth-child(2)").click(function() {
					$(".rmask_box").hide();
				})
			})

			/*miniui - tree 插件 - 开始*/
			mini.parse();
			var tree = mini.get("tree1");

			function search() {
				var key = mini.get("key").getValue();
				if (key == "") {
					tree.clearFilter();
				} else {
					key = key.toLowerCase();
					tree.filter(function(node) {
						var name = node.name ? node.name.toLowerCase() : "";
						if (name.indexOf(key) != -1) {
							return true;
						}
					});
				}
			}

			function onKeyEnter(e) {
				search();
			}
			/* 以下是数量加减按钮 */
			$("body").on("click", ".num-jian", function(m) {
				var obj = $(this).closest("ul").find(".input-num");
				if (obj.val() <= 0) {
					obj.val(0);
				} else {
					obj.val(parseInt(obj.val()) - 1);
				}
				obj.change();
				
				
			});
			$("body").on("click", ".num-jia", function(m) {
				var obj = $(this).closest("ul").find(".input-num");
				obj.val(parseInt(obj.val()) + 1);
				obj.change();
			});
			
			
			var totalQuantity = 0; //总数量
			var totalMoney = 0; //总金额
			var totalIntegral = 0; //总积分
			function onNodeClick() {
				//获取选中节点的值
				var flag = false;
				var tree = mini.get("tree1");
				node = tree.getSelectedNode();
				
				if (node.end) {
					/*树结构选中商品，table列表变化 - 开始*/
					totalQuantity++;
					$('.totalQuantity').html(totalQuantity);

					this_price = node.price; //获取单价
					this_price = parseFloat(this_price);
					totalMoney += this_price;
					$('.totalMoney').html(totalMoney.toFixed(2));

					this_integral = node.integral; //获取积分  
					this_integral = parseFloat(this_integral);
					totalIntegral += this_integral;
					$('.totalIntegral').html(totalIntegral.toFixed(0));
					/*树结构选中商品，table列表变化 - 结束*/

					if ($("#myTbody tr").length <= 0) {
						var addtr = '<tr class="mytr">';
						addtr += '<td>' + node.id + '</td>';
						addtr += '<td>' + node.name + '</td>';
						addtr += '<td class="kbj danjia">' + node.price + '</td>';
						addtr +=
							'<td class="numberTd"><div class="jiajian"><span class="jian" onclick="num_sub(this)">-</span><input type="text" value="1" class="num"><span class="jia" onclick="num_add(this)">+</span></div></td>';
						addtr += '<td class="jifen">' + node.integral + '</td>';
						addtr += '<td class="kbj remarks"></td>';
						addtr += '<td><button class="delete_btn">删除</button></td>';
						addtr += '</tr>';
						$("#myTbody").append(addtr);
						return;
					} else {
						$("#myTbody tr").each(function() {
							//找到商品的名称与上面获取到的商品名称进行对比
							if ($(this).children("td:eq(0)").html() == node.id) {
								//找到此商品的数量
								var count = parseInt($(this).children("td:eq(3)").find("input").val());
								count++;
								$(this).children("td:eq(3)").find("input").val(count); //对商品的数量进行重新赋值
								flag = true;
								return false;
							} else {
								flag = false;
							}
						})
					}
					//如果为默认值也就是说里面没有此商品，所以添加此商品。
					if (flag == false) {
						var addtr = '<tr class="mytr">';
						addtr += '<td>' + node.id + '</td>';
						addtr += '<td>' + node.name + '</td>';
						addtr += '<td class="danjia">' + node.price + '</td>';
						addtr +=
							'<td><div class="jiajian"><span class="jian" onclick="num_sub(this)">-</span><input type="text" value="1" class="num"><span class="jia" onclick="num_add(this)">+</span></div></td>';
						addtr += '<td class="jifen">' + node.integral + '</td>';
						addtr += '<td class="remarks"></td>';
						addtr += '<td><button class="delete_btn">删除</button></td>';
						addtr += '</tr>';
						$("#myTbody").append(addtr);
					}
				}
			}
			/*miniui - tree 插件 - 结束*/

			//加的效果 
			function num_add(on_this) {

				var totalQuantity = 0; //总数量
				var totalMoney = 0; //总金额
				var totalIntegral = 0; //总积分
				$("#myTbody tr").each(function() {

					//获取当前行的单价
					this_price = $(this).children(".danjia").text();
					this_price = parseFloat(this_price);

					//获取当前行的积分
					this_integral = $(this).children(".jifen").text();
					this_integral = parseFloat(this_integral);

					//获取当前行的数量
					this_num = $(this).find(".num").val();
					this_num = parseInt(this_num);

					//获取当前行的总价格、总积分
					var trmoney = this_price * this_num;
					var trIntegral = this_integral * this_num;

					//总金额、总数量、总积分
					totalQuantity += this_num * 1; //总数量
					totalMoney += trmoney * 1 //总金额
					totalIntegral += trIntegral * 1 //总积分
				})
				$(".totalQuantity").html(totalQuantity);
				$(".totalMoney").html(totalMoney);
				$(".totalIntegral").html(totalIntegral);

				this_price = $(on_this).parents("td").siblings("td.danjia").text(); //获取单价
				this_price = parseFloat(this_price);
				console.log(totalMoney);
				totalMoney += this_price;
				$('.totalMoney').html(totalMoney.toFixed(2));
				console.log(totalMoney);

				this_integral = $(on_this).parents("td").siblings("td.jifen").text(); //获取积分  
				this_integral = parseFloat(this_integral);
				totalIntegral += this_integral;
				$('.totalIntegral').html(totalIntegral.toFixed(0));

				//当前商品数量
				this_num = $(on_this).siblings('.num');
				var get_this_num = parseInt(this_num.val()) + 1;
				this_num.val(get_this_num);

				totalQuantity++;
				$('.totalQuantity').html(totalQuantity);
			}

			//减的效果  
			function num_sub(on_this) {

				var totalQuantity = 0; //总数量
				var totalMoney = 0; //总金额
				var totalIntegral = 0; //总积分
				$("#myTbody tr").each(function() {

					//获取当前行的单价
					this_price = $(this).children(".danjia").text();
					this_price = parseFloat(this_price);

					//获取当前行的积分
					this_integral = $(this).children(".jifen").text();
					this_integral = parseFloat(this_integral);

					//获取当前行的数量
					this_num = $(this).find(".num").val();
					this_num = parseInt(this_num);

					//获取当前行的总价格、总积分
					var trmoney = this_price * this_num;
					var trIntegral = this_integral * this_num;

					//总金额、总数量、总积分
					totalQuantity += this_num * 1; //总数量
					totalMoney += trmoney * 1 //总金额
					totalIntegral += trIntegral * 1 //总积分
				})
				$(".totalQuantity").html(totalQuantity);
				$(".totalMoney").html(totalMoney);
				$(".totalIntegral").html(totalIntegral);

				//当前商品数量
				this_num = $(on_this).siblings('.num');
				if (this_num.val() <= 1) {
					this_num.siblings('.jian').removeAttr('onclick');
					return;
				} else {
					var get_this_num = this_num.val() - 1;
					this_num.val(get_this_num);

					this_price = $(on_this).parents("td").siblings("td.danjia").text(); //获取单价
					totalMoney -= this_price;
					$('.totalMoney').html(totalMoney.toFixed(2));

					this_integral = $(on_this).parents("td").siblings("td.jifen").text(); //获取积分  
					totalIntegral -= this_integral;
					$('.totalIntegral').html(totalIntegral.toFixed(0));

					totalQuantity--;
					$('.totalQuantity').html(totalQuantity);
				}
			}

			//输入商品数量时改变合计的内容
			$("#myTbody").on("keyup", ".num", function() {
				if ($(this).val() == '') {
					$(this).val('1');
				}
				$(this).val($(this).val().replace(/\D|^0/g, ''));
				setTotal();
			})

			//点击 - 备注 - 可编辑
			$("#myTbody").on("click", "td.remarks", function() {
				if (!$(this).is('.bj')) {
					$(this).addClass('bj').html('<textarea class="layui-textarea" value="' + $(this).val() + '" />').find('textarea')
						.focus().blur(function() {
							$(this).parent().removeClass('bj').html($(this).val())
						});
				}
			})

			//点击 - 单价 - 可编辑
			$("#myTbody").on("click", "td.danjia", function() {
				if (!$(this).is('.bj')) {
					var currentPrice = $(this).html();
					$(this).focus();
					$(this).addClass('bj').html('<input type="tel" class="layui-input" value="' + $(this).text() + '" />').find(
						'input').focus().blur();
				}
			})
			//输入商品价格时改变合计的内容
			$("#myTbody").on("change", ".danjia input", function() {
				var $this = $(this).val();
				var reg = /^(([1-9]+)|([0-9]+\.[0-9]{1,2}))$/;
				if (!reg.test($this)) {
					alert("请输入非负浮点数");
					$(this).parent().removeClass('bj').html($this || "1.00");
					$(this).val(currentPrice);
				} else {
					$(this).parent().removeClass('bj').html($this || "1.00");
					setTotal();
				}
			})

			//table tr 点击删除
			$("#myTbody").on("click", ".delete_btn", function() {
				if ($("#myTbody tr").length < 1) {
					$(".totalQuantity").html("0");
					$(".totalMoney").html("0");
					$(".totalIntegral").html("0");
					return;
				}

				$(this).parents("#myTbody tr").remove();
				setTotal();
			})

			function setTotal() {
				var totalQuantity = 0; //总数量
				var totalMoney = 0; //总金额
				var totalIntegral = 0; //总积分
				$("#myTbody tr").each(function() {

					//获取当前行的单价
					this_price = $(this).children(".danjia").text();
					this_price = parseFloat(this_price);

					//获取当前行的积分
					this_integral = $(this).children(".jifen").text();
					this_integral = parseFloat(this_integral);

					//获取当前行的数量
					this_num = $(this).find(".num").val();
					this_num = parseInt(this_num);

					//获取当前行的总价格、总积分
					var trmoney = this_price * this_num;
					var trIntegral = this_integral * this_num;

					//总金额、总数量、总积分
					totalQuantity += this_num * 1; //总数量
					totalMoney += trmoney * 1 //总金额
					totalIntegral += trIntegral * 1 //总积分
				})
				$(".totalQuantity").html(totalQuantity);
				$(".totalMoney").html(totalMoney);
				$(".totalIntegral").html(totalIntegral);
			}
		</script>
	</body>
</html>
